<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>{$data.appName}</title>
    <link rel="stylesheet" href="__CSS__vue/api.css">
    <link rel="stylesheet" href="__CSS__vue/news.css">
    <link rel="stylesheet" href="__CSS__vue/footer.css">
    <link rel="stylesheet" href="__CSS__vue/xsp.css">
    <style>
        header {
            position: fixed;
            top: 0;
            z-index: 2;
            width: 100vw;
            box-sizing: border-box;
        }

        .new-nav .n-list {
            color: #aaa;
        }

        .new-nav .n-list.active {
            color: #fff;
        }

        .new-nav .n-list::after {
            background: transparent;
        }

        .new-nav .n-list.active::after {
            background: #fff;
        }

        .boy-tag {
            height: 15px;
            margin-right: 3px;
        }

        #video-url {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            object-fit: fill;
        }
    </style>
</head>

<body>
<div id="view">
    <div class="box" @click.stop="playVideo()">
        <div class="wrap">
            <video id="video-url" :poster="returnImg(ffInfo.cover)" autoplay loop="true" x5-video-player-type="h5-page">
                <source id="video-url-mp4" :src="returnImg(ffInfo.video)">
            </video>
            <div class="content">
                <div class="left" @click.stop onclick="openApp()">
                    <h3 class="title">{{ffInfo.content}}</h3>
                    <p class="see flex"><i class="base-icon see-icon"></i><span class="name">{{ffInfo.visit}}</span></p>
                    <div class="user">
                        <div class="flex">
                            <span class="boy-tag" :class="{'girl-tag':ffInfo.sex == '女'}"></span>
                            <p class="name">{{ffInfo.name}}</p>
                            <span class="new-tag man-ntag" :class="{'woman-ntag':ffInfo.sex=='女'}" v-if="ffInfo.realname_auth==2 && !ios"></span>
                            <span class="new-tag rz-tag" v-if="ffInfo.is_identity_authentication==2"></span>
                            <img class="new-noble" v-if="ffInfo.noble_icon" :src="returnImg(ffInfo.noble_icon)" alt="">
                        </div>
                        <p class="name info">
                            <span class="tag" v-if="ffInfo.age">{{ffInfo.age}}岁</span>
                            <span class="tag" v-if="ffInfo.stature">{{ffInfo.stature}}cm</span>
                            <span class="tag" v-if="ffInfo.occupation">{{ffInfo.occupation}}</span>
                        </p>
                    </div>
                </div>
                <div class=" right flex-c flex-col" @click.stop onclick="openApp()">
                    <div class="name-wrap">
                        <div class="tx img-w">
                            <img :src="returnImg(ffInfo.head_100)" alt="">
                        </div>
                        <i class="base-icon gz-icon"></i>
                    </div>
                    <div class="like-wrap ">
                        <i class="base-icon video-nolike" :class="{'video-like':ffInfo.thumbsup == 1}"></i>
                        <span class="name">{{ffInfo.num}}</span>
                    </div>
                    <div class="like-wrap " v-if="ffInfo.text">
                        <i class="base-icon ping-icon"></i>
                        <span class="name">{{ffInfo.text.length ? ffInfo.text.length : '评论'}}</span>
                    </div>
                    <div class="like-wrap">
                        <i class="base-icon share-icon"></i>
                    </div>
                    <div class="like-wrap">
                        <i class="base-icon heart-icon"></i>
                    </div>
                </div>
            </div>
        </div>
        <img class="play-icon" v-if="!play" src="__IMG__vue/icon/album_ic_playclip.png" alt="">
    </div>
</div>
</body>
<script src="__JS__vue/jquery.js"></script>
<script src="__JS__vue/vue.js"></script>
<script>
    var fondfell_url = '{$data.url}';
    var view = new Vue({
        el: '#view',
        data: {
            imgurl: fondfell_url,
            ffList: [],
            ffInfo: {},
            ios: 0, // 1上架 0非上架
            param: {},
            play: 0,
        },
        methods: {
            // 返回图片路径
            returnImg(url) {
                return returnImg(url);
            },
            playVideo() {
                view.play = view.play ? 0 : 1;
                var videoDom = document.getElementById('video-url');
                videoDom.load();
                if (view.play == 1) {
                    videoDom.play();
                } else {
                    videoDom.pause();
                }

            }
        }
    })
    getParam();
    getData();

    function getParam() {
        var url = window.location.href;
        url = url.split('?')[1];
        var arr = url.split('&');
        var result = {};
        for (var i = 0, len = arr.length; i < len; i++) {
            var a = arr[i].split('=');
            result[a[0]] = a[1];
        }
        view.param = result;
    }

    // 图片处理
    function returnImg(url) {
        if (!url) return url;
        if (url && url.indexOf('disk/') != -1 && url.indexOf('http') == -1) {
            // 在线地址  缺少http
            return fondfell_url + url;
        } else {
            // 非在线地址 / 不缺少http前缀
            return url;
        }
    }

    function openApp() {
        window.location.href = fondfell_url + '/invite/' + view.param.uid;
    }

    // 获取动态详情
    function getData() {
        var phpUrl = '{$data.fullUrl}';

        $.ajax({
            url: phpUrl,
            type: 'post',
            data: {
                dy_id: view.param.id,
                userid: view.param.uid
            },
            dataType: 'json',
            success: function(ret) {
                // 成功
                if (typeof ret == 'string') {
                    ret = JSON.parse(ret);
                }
                view.ffInfo = ret.result;

            },
            error: function(err) {}
        });
    }
</script>

</html>